<template>
  <div class="boxs">
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item>
        <img src="@/assets/user/icon.png" alt="" />
        <span class="span">项目管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="span" style="color: #666">商链驿</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 二楼表格 -->
    <div class="f2">
      <!-- 顶部标签 -->
      <div class="title">
        <h3 :class="{ active: row == 1 }" @click="row1(1)">我的授信</h3>
        <h3 :class="{ active: row == 2 }" @click="row1(2)">我的用信</h3>
      </div>
      <div class="null" v-if="!userData">
        <img src="@/assets/shangpiao/组162.png" alt="" />
        <h3>暂无数据记录</h3>
      </div>
      <div v-else>
        <!-- 我的授信 -->
        <div v-show="row == 1">
          <!-- 搜索栏 -->
          <div class="user-search">
            <div>
              <span>项目状态</span>
              <el-select class="abc" v-model="userState" placeholder="请选择项目状态">
                <el-option key="999" label="全部" value="8918"></el-option>
                <el-option key="1" label="审批中" value="审批中"></el-option>
                <el-option key="2" label="审批拒绝" value="审批拒绝"></el-option>
                <el-option key="3" label="审批通过" value="审批通过"></el-option>
                <el-option key="4" label="正常结项" value="正常结项"></el-option>
                <el-option key="5" label="逾期结项" value="逾期结项"></el-option>
              </el-select>
            </div>
            <div class="f3_content_search_input">
              <span>产品名称</span>
              <input type="text" placeholder="请输入产品名称" v-model="proceedsId" />
              <img src="@/assets/shangpiao/组26.png" alt="" />
            </div>
          </div>
          <!-- 表格+分页器 -->
          <transition :name="transitionName" mode="out-in">
            <!-- 我的授信空状态 -->
            <div class="null" v-if="!userData">
              <img src="@/assets/shangpiao/组162.png" alt="" />
              <h3>暂无数据记录</h3>
            </div>
            <div class="table" v-else v-loading="loading">
              <el-table
                :data="userData"
                border
                highlight-current-row
                stripe
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D'
                }"
              >
                >
                <el-table-column prop="num" label="序号" fixed width="80" align="center">
                </el-table-column>
                <el-table-column prop="oderid" label="项目编号" width="220" fixed align="center">
                </el-table-column>
                <el-table-column prop="productname" label="产品名称" min-width="280" align="center">
                </el-table-column>
                <el-table-column prop="funder" label="金融机构" min-width="280" align="center">
                </el-table-column>

                <el-table-column
                  prop="creditamount"
                  label="授信金额（元）"
                  width="180"
                  align="right"
                >
                  <template slot-scope="scope">
                    {{ scope.row.creditamount | getArea }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="availamount"
                  label="剩余可用额度（元）"
                  width="230"
                  align="right"
                >
                  <!--  -->
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == '审批中' || scope.row.status == '审批拒绝'">
                      {{ scope.row.availamount | getArea }}</span
                    >
                    <span v-else> {{ scope.row.availamount | getAreas }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="applydate" label="申请日期" width="180" align="center">
                  <template slot-scope="scope">{{ scope.row.applydate | getDate }}</template>
                </el-table-column>
                <el-table-column prop="enddate" label="到期日期" width="180" align="center">
                  <template slot-scope="scope">{{ scope.row.enddate | getDate }}</template>
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="项目状态"
                  width="140"
                  align="center"
                  fixed="right"
                >
                </el-table-column>
                <el-table-column label="操作" width="180" align="center" fixed="right">
                  <template slot-scope="scope">
                    <span
                      class="span1"
                      @click="goDetails(scope.$index, userData)"
                      type="text"
                      size="small"
                    >
                      查看
                    </span>
                    <span
                      v-if="
                        userData[scope.$index].status == '审批通过' &&
                        (userData[scope.$index].availamount > 0 ||
                          userData[scope.$index].availamount != '0.00') &&
                        (userData[scope.$index].productcode == 'SCF003001' ||
                          userData[scope.$index].productcode == 'SCF003002' ||
                          userData[scope.$index].productcode == 'SCF013001' ||
                          userData[scope.$index].productcode == 'SCF012002' ||
                          userData[scope.$index].productcode == 'SCF012003' ||
                          userData[scope.$index].productcode == 'SCF022001')
                      "
                      class="span1"
                      @click="goApplyFor(scope.$index, userData)"
                      type="text"
                      size="small"
                    >
                      申请用款
                    </span>
                    <span
                      v-if="
                        userData[scope.$index].status == '审批通过' &&
                        userData[scope.$index].availamount > 0 &&
                        userData[scope.$index].productcode == 'SCF012001'
                      "
                      class="span1"
                      @click="goApplyFor(scope.$index, userData)"
                      type="text"
                      size="small"
                    >
                      申请用款
                    </span>
                    <span
                      v-if="
                        userData[scope.$index].status == '审批中' &&
                        userData[scope.$index].productcode == 'SCF012001'
                      "
                      class="span1"
                      @click="goApplyFor(scope.$index, userData)"
                      type="text"
                      size="small"
                    >
                      授信申请
                    </span>
                    <span
                      v-if="
                        userData[scope.$index].status == '审批中' &&
                        (userData[scope.$index].productcode == 'SCF003001' ||
                          userData[scope.$index].productcode == 'SCF003002' ||
                          userData[scope.$index].productcode == 'SCF013001')
                      "
                      class="span1"
                      @click="goApplyFor(scope.$index, userData)"
                      type="text"
                      size="small"
                    >
                      申请授信
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </transition>
          <!-- 分页器 -->
          <div class="pagination" v-if="userData">
            <el-pagination
              background
              layout="prev, pager, next"
              @next-click="nextClick()"
              @prev-click="prevClick()"
              @current-change="handlePageChange"
              :total="pages * 10"
            ></el-pagination>
            <span>共{{ pages }}页</span>
          </div>
        </div>
        <!-- 我的用信 -->
        <div v-show="row == 2">
          <PreViewPage v-if="PreViewPageStatus" style="position: absolute; top: 0; z-index: -999" />
          <PreViewPageVoucher
            v-if="PreViewPageStatus"
            style="position: absolute; top: 0; z-index: -999"
          />

          <!-- 搜索栏 -->
          <div class="user-search">
            <div>
              <span>项目状态</span>
              <el-select class="abc" v-model="YXuserState" placeholder="请选择项目状态">
                <el-option key="999" label="全部" value="8918"></el-option>
                <el-option key="2" label="已放款" value="已放款"></el-option>
                <el-option key="4" label="放款拒绝" value="放款拒绝"></el-option>
                <el-option key="5" label="正常结清" value="正常结清"></el-option>
                <el-option key="6" label="逾期结清" value="逾期结清"></el-option>
              </el-select>
            </div>
            <!-- <div v-if="productNames">
              <span>产品名称</span>
              <el-select class="abc" v-model="YXproceedId" placeholder="请选择产品">
                <el-option key="10" label="全部" value="8918"></el-option>
                <el-option
                  v-for="item in productNames"
                  :key="item.id"
                  :label="item.productname"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div> -->
            <div class="f3_content_search_input">
              <span>产品名称</span>
              <input type="text" placeholder="请输入产品名称" v-model="YXproceedId" />
              <img src="@/assets/shangpiao/组26.png" alt="" />
            </div>
          </div>
          <!-- 表格+分页器 -->
          <transition :name="transitionName" mode="out-in">
            <!-- 我的用信空状态 -->
            <div class="null" v-if="!YXData">
              <img src="@/assets/shangpiao/组162.png" alt="" />
              <h3>暂无数据记录</h3>
            </div>
            <div class="table" v-else v-loading="loading">
              <el-table
                :data="YXData"
                border
                highlight-current-row
                stripe
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D'
                }"
              >
                <el-table-column prop="num" label="序号" fixed min-width="80" align="center">
                </el-table-column>
                <el-table-column
                  prop="oderid"
                  label="项目编号"
                  min-width="240"
                  fixed
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="productname" label="产品名称" min-width="350" align="center">
                </el-table-column>
                <el-table-column prop="funder" label="金融机构" min-width="280" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.funder | getData }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="businesssum"
                  label="用信金额（元）"
                  min-width="160"
                  align="right"
                >
                  <template slot-scope="scope">
                    {{ scope.row.businesssum | getArea }}
                  </template>
                </el-table-column>
                <el-table-column prop="applydate" label="申请日期" min-width="180" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.applydate | getDate }}
                  </template>
                </el-table-column>
                <el-table-column prop="statuss" label="项目状态" min-width="160" align="center">
                </el-table-column>
                <el-table-column label="操作" min-width="200" align="center" fixed="right">
                  <template slot-scope="scope">
                    <span
                      class="span1"
                      @click="goApplyForMoneyDetails(scope.$index, YXData)"
                      type="text"
                      size="small"
                    >
                      查看
                    </span>
                    <el-tooltip
                      class="item"
                      effect="light"
                      :content="
                        YXData[scope.$index].productcode == 'SCF012002'
                          ? '下载《应收账款信息确认函》'
                          : '下载《应收账款确认凭证》'
                      "
                      placement="top"
                    >
                      <span
                        v-if="
                          YXData[scope.$index].statuss == '审批中' &&
                          (YXData[scope.$index].productcode == 'SCF012002' ||
                            YXData[scope.$index].productcode == 'SCF012003')
                        "
                        class="span1"
                        @click="getPdfFile(scope.$index, YXData)"
                        type="text"
                        size="small"
                      >
                        下载
                      </span>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </transition>
          <!-- 分页器 -->
          <div class="pagination" v-if="YXData">
            <el-pagination
              background
              layout="prev, pager, next"
              @next-click="nextClicks()"
              @prev-click="prevClicks()"
              @current-change="handlePageChanges"
              :total="YXPages * 10"
            ></el-pagination>
            <span>共{{ YXPages }}页</span>
          </div>
        </div>
      </div>
    </div>

    <message-box :open="dialogVisible" @close="close" />
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      :visible.sync="dialogVisible1"
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <div class="dialog-center-bottom">
          <div class="dialog-center-bottom-center">
            <img
              v-show="productcode == 'SCF003001' || productcode == 'SCF003002'"
              src="@/assets/image/ghd.png"
              alt=""
            />
            <img v-show="productcode == 'SCF013001'" src="@/assets/image/cgd.png" alt="" />
            <img v-show="productcode == 'SCF012001'" src="@/assets/icon/image.png" alt="" />
            <div>
              <p>请您扫描二维码完成后续操作</p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MessageBox from '@/components/MessageBox.vue'
import PreViewPage from '@/components/PreViewPage.vue'
import PreViewPageVoucher from '@/components/voucher/PreViewPage.vue'

import { findbuss, findbussx, base, myPostFetch } from '@/utils'
export default {
  components: { MessageBox, PreViewPage, PreViewPageVoucher },
  data() {
    return {
      formList: [],
      PreViewPageStatus: false,
      productcode: null,
      loading: false,
      visible: false,
      row: 1,
      base: '', // 服务器跟地址
      userState: '', //项目状态
      productName: '', //产品名称
      productState: '8918', //产品状态
      productId: '8918', //产品id
      proceedsId: '', //授信信产品ID
      pageNum: 1, //当前页数
      pageSize: 10, //每页条数
      pages: 1,
      // 我的用信页数
      YXproceedsId: '8918', //用信产品ID
      YXproceedId: '', //用信产品ID
      YXuserState: '', //用信项目状态
      YXPageNum: 1, //当前页数
      YXPageSize: 10, //每页条数
      YXPages: 1,
      transitionName: 'slide-left',
      // 授信表格数据
      userData: null,
      // 用信表格数据
      YXData: null,
      // productNames: null,
      //组件弹窗
      dialogVisible: false,
      dialogVisible1: false
    }
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      if (value <= 0) return '-'
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getAreas: function (value) {
      value = parseFloat(value)
      if (!value) return '0.00'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      if (value <= 0) return '0.00'
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getDate: function (value) {
      if (!value) return '-'
      let date = value.split(' ')[0]
      return date
    },
    getData: function (value) {
      if (value) return value
      let date = '-'
      return date
    },
    getMoney: function (value) {
      if (!value) return '0'
      // if (value < 10000) return value;
      value = Math.floor((value / 10000) * 100) / 100
      return value
    }
  },
  watch: {
    // 监听产品名称变化
    proceedsId() {
      this.pageNum = 1
      this.pages = 10
      this.productId = this.proceedsId
      this.findbuss()
    },
    // 监听用信产品名称变化
    YXproceedId() {
      this.YXPageNum = 1
      this.YXPageSize = 10
      this.YXproceedsId = this.YXproceedId
      this.findbussx()
    },
    // 监听项目状态变化
    userState() {
      this.YXPageNum = 1
      this.pages = 1
      this.productState = this.userState
      this.findbuss()
    },
    YXuserState() {
      this.pageNum = 1
      this.pages = 1
      this.productState = this.YXuserState
      this.findbussx()
    },
    // 监听page的变化
    pageNum() {
      this.findbuss()
    }
  },
  mounted() {
    this.findbuss()
    this.findbussx()
    this.getSelectallproduct()
    let row = sessionStorage.getItem('row')
    if (row) this.row = row
    this.base = base
  },
  methods: {
    getPdfFile(index, item) {
      this.formList = []
      this.getFindputoutGCFile(item[index].putoutid, item[index].productname)
      setTimeout(() => {
        this.PreViewPageStatus = true
      }, 500)
      if (item[index].productcode == 'SCF012002') {
        setTimeout(() => {
          this.exportToPdf(
            'pdfDom',
            '应收账款信息确认函',
            'ConfirmedAccDetail-demo',
            item[index].putoutid
          )
        }, 500)
      } else if (item[index].productcode == 'SCF012003') {
        setTimeout(() => {
          this.exportToPdf(
            'pdfDomFK',
            '应收账款确认凭证',
            'ConfirmedAccDetail-demo',
            item[index].putoutid
          )
        }, 500)
      }
      setTimeout(() => {
        this.$router.go(0)
      }, 2000)
    },
    async getFindputoutGCFile(putoutid, productname) {
      let url = '/api/pros/findfilelist'
      let params = {
        putoutid: putoutid
      }
      let data = await myPostFetch(url, params)
      this.formList.push({
        a: data.data.contractno,
        b: data.data.contractname,
        c: data.data.billno,
        d: data.data.billcode,
        e: data.data.payamount,
        f: data.data.paydate,
        g: data.data.acctname,
        h: data.data.acctno,
        i: data.data.bank
      })
      localStorage.setItem('putoutid', putoutid)
      localStorage.setItem('orgname', data.data.orgname)
      // localStorage.setItem('inputdate', data.data.inputdate)
      localStorage.setItem('entLicenseno', data.data.entlicenseno)
      localStorage.setItem('orgLicenseno', data.data.orglicenseno)
      localStorage.setItem('productname', productname)
      localStorage.setItem('formList', JSON.stringify(this.formList))
    },
    // 获取白名单产品,
    async getSelectallproduct() {
      let list = []
      let url = '/api/products/productsList'
      let params = {
        customerid:
          sessionStorage.getItem('customerid') != 'null' &&
          sessionStorage.getItem('customerid') != null &&
          sessionStorage.getItem('customerid') != 'undefined'
            ? sessionStorage.getItem('customerid')
            : ''
      }
      let data = await myPostFetch(url, params)
      if (data.code == 10000) {
        this.$Message.error(data.msg)
        this.$router.push('/login')
        sessionStorage.clear()
        localStorage.clear()
        return
      }
      // if (data.data != null && data.data.length != 0) {
      //   this.productNames = data.data
      // }
    },

    // 组件显示隐藏
    open() {
      this.dialogVisible = true
    },
    close(val) {
      this.dialogVisible = val
    },
    // 跳转至平台认证页
    updateCoopeorgInvoice() {
      this.visible = false
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      this.visible = false
      if (coopid == 'null' || rzstatus != 'succ') {
        this.$router.push('/platform')
        this.setTim()
        return
      } else if (coopid == 'null') {
        this.$router.push('/platform')
        this.setTim()
        return
      }
    },
    // 切换
    row1(row) {
      this.loading = true
      this.row = row
      sessionStorage.setItem('row', row)
      setTimeout(() => {
        this.loading = false
      }, 800)
    },
    // 我的授信点击下一页
    nextClick() {
      this.pageNum += 1
      this.findbuss()
    },
    //我的授信 点击上一页
    prevClick() {
      this.pageNum -= 1
      this.findbuss()
    },
    //用信 点击下一页
    nextClicks() {
      this.YXPageNum += 1
      this.findbussx()
    },
    //用信 点击上一页
    prevClicks() {
      this.YXPageNum -= 1
      this.findbussx()
    },

    // 点击数字改变page的值
    handlePageChange(currentPage) {
      this.pageNum = currentPage
      this.findbuss()
    },
    // 点击数字改变page的值
    handlePageChanges(currentPage) {
      this.YXPageNum = currentPage
      this.findbussx()
    },
    // 我的授信列表
    async findbuss() {
      this.loading = true
      let data = await findbuss(this.pageNum, this.pageSize, this.productState, this.productId)
      if (data.data) {
        this.userData = data.data.list
        for (let i = 0; i < this.userData.length; i++) {
          this.userData[i].num = (this.pageNum - 1) * 10 + i + 1
        }
        this.pages = data.data.pages
        this.loading = false
        return data
      }
    },
    // 我的用信列表
    async findbussx() {
      this.loading = true
      let data = await findbussx(
        this.YXPageNum,
        this.YXPageSize,
        this.productState,
        this.YXproceedsId
      )
      if (data.data) {
        this.YXData = data.data.list
        for (let i = 0; i < this.YXData.length; i++) {
          this.YXData[i].num = (this.YXPageNum - 1) * 10 + i + 1
        }
        this.YXPages = data.data.pages
        this.loading = false
        return data
      }
    },
    // 我的授信 点击查看跳转项目详情
    goDetails(index, row) {
      //  else if (
      //   productcode == 'SCF015001' ||
      //   productcode == 'SCF014001' ||
      //   productcode == 'SCF017001' ||
      //   productcode == 'SCF018001' ||
      //   productcode == 'SCF019001'
      // ) {
      //   this.$router.push(`/projectSjghdDetails`)
      // }
      localStorage.clear()
      let id = row[index].id
      let status = row[index].status
      let productcode = row[index].productcode
      this.$store.commit('updataSLApplyid', id)
      this.$store.commit('updataSLStatus', status)
      localStorage.setItem('productcode', productcode)
      if (productcode == 'SCF006001') {
        this.$router.push(`/projectBaoLiRongZiDetails`)
      } else if (productcode == 'SCF012001') {
        if (status == '审批拒绝') {
          this.$router.push(`/projectChanYeEDaiJJ`)
        } else {
          this.$router.push(`/projectChanYeEDaiTG`)
        }
      } else if (
        productcode == 'SCF003001' ||
        productcode == 'SCF003002' ||
        productcode == 'SCF013001' ||
        productcode == 'SCF012002' ||
        productcode == 'SCF012003' ||
        productcode == 'SCF022001' ||
        productcode == 'SCF014001' ||
        productcode == 'SCF018001' ||
        productcode == 'SCF020002' ||
        productcode == 'SCF024001' ||
        productcode == 'SCF015001' ||
        productcode == 'SCF028001' ||
        productcode == 'SCF025001' ||
        productcode == 'SCF026001' ||
        productcode == 'SCF019001' ||
        productcode == 'SCF017001'
      ) {
        if (status == '审批拒绝' || status == '审批中') {
          this.$router.push(`/projectGongHuoDaiJJ`)
        } else {
          this.$router.push(`/projectGongHuoDaiTG`)
        }
      } else if (productcode == 'SCF021001' || productcode == 'SCF027001') {
        this.$router.push(`/projectSPBT`)
      }
    },
    // 点击立即用款跳转至用款申请页
    goApplyFor(index, row) {
      localStorage.clear()
      let id = row[index].id
      let productcode = row[index].productcode
      this.productcode = productcode
      let proid = row[index].proid
      if (
        productcode == 'SCF003001' ||
        productcode == 'SCF003002' ||
        productcode == 'SCF013001' ||
        productcode == 'SCF022001' ||
        productcode == 'SCF012001'
      ) {
        this.dialogVisible1 = true
        return
      } else if (productcode == 'SCF012002') {
        // 跳转至工程企信贷产品用款申请页面
        this.$store.commit('updataSLApplyid', id)
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyId', proid)
        this.$router.push(`/GCQXDYongXinApply`)
        setTimeout(() => {
          this.$router.go(0)
        }, 500)
        return
      } else if (productcode == 'SCF012003') {
        // 跳转至付款承诺保函产品用款申请页面
        this.$store.commit('updataSLApplyid', id)
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyId', proid)
        this.$router.push(`/FkcnYongXinApply`)
        setTimeout(() => {
          this.$router.go(0)
        }, 500)
        return
      }
      this.$store.commit('updataSLApplyid', id)
      this.$store.commit('updataApplyProductcode', productcode)
      this.$store.commit('updataApplyId', proid)
      this.$router.push(`/yongXinApply?show=true`)
    },
    // 点击我的用信跳转用信详情页
    goApplyForMoneyDetails(index, row) {
      localStorage.clear()
      let productcode = row[index].productcode
      localStorage.setItem('productcode', productcode)
      if (productcode == 'SCF006001') {
        this.$store.commit('updataSLPutoutid', row[index].putoutid)
        this.$store.commit('updataSLStatus', row[index].statuss)
        this.$router.push(`/yongXinBaoLiRongZiDetails`)
      } else if (
        productcode == 'SCF003001' ||
        productcode == 'SCF003002' ||
        productcode == 'SCF013001' ||
        productcode == 'SCF014001' ||
        productcode == 'SCF018001' ||
        productcode == 'SCF020002' ||
        productcode == 'SCF024001' ||
        productcode == 'SCF015001' ||
        productcode == 'SCF028001' ||
        productcode == 'SCF025001' ||
        productcode == 'SCF026001' ||
        productcode == 'SCF019001' ||
        productcode == 'SCF017001'
      ) {
        this.$store.commit('updataSLPutoutid', row[index].putoutid)
        this.$store.commit('updataSLStatus', row[index].statuss)
        this.$router.push(`/yongXinGongHuoDaiDetails`)
      } else if (productcode == 'SCF012001') {
        this.$store.commit('updataSLPutoutid', row[index].putoutid)
        this.$store.commit('updataSLStatus', row[index].statuss)
        this.$router.push(`/yongXinChanYeEDai`)
      } else if (productcode == 'SCF012002') {
        this.$store.commit('updataSLPutoutid', row[index].putoutid)
        this.$store.commit('updataSLStatus', row[index].statuss)
        this.$router.push(`/GongChengQiXinDaiYongXinDetails`)
      } else if (productcode == 'SCF012003') {
        this.$store.commit('updataSLPutoutid', row[index].putoutid)
        this.$store.commit('updataSLStatus', row[index].statuss)
        this.$router.push(`/FuKuanChengNuoYongXinDetails`)
      } else if (productcode == 'SCF021001' || productcode == 'SCF027001') {
        this.$store.commit('updataSLPutoutid', row[index].putoutid)
        this.$store.commit('updataSLStatus', row[index].statuss)
        this.$router.push(`/projectYXSPBT`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boxs {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // 面包屑
  .breadcrumb {
    display: flex;
    align-items: center;
    height: 0.3958rem;
    font-size: 0.0833rem;
    background-color: rgb(242, 244, 247);
    .icon {
      margin: 0 0.0521rem 0 0.0208rem;
    }
    .span {
      font-size: 0.0833rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
    img {
      width: 0.0938rem;
      height: 0.0938rem;
      margin-right: 0.026rem;
    }
  }
  .f2 {
    overflow: hidden;
    // flex: 1;
    height: 890px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    margin-top: 0.026rem;
    box-shadow: 0px 0.0052rem 0.0521rem 0px rgba(196, 196, 196, 0.15);
    border-radius: 0.0313rem;
    padding: 0.1042rem 0.1042rem 0.026rem 0.1042rem;
    .title {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.3385rem;
      z-index: 99;
      border-bottom: 0.0052rem solid #e0e6ed;
      h3 {
        display: flex;
        align-items: center;
        padding: 0 0.0521rem;
        height: 0.3385rem;
        box-sizing: border-box;
        font-size: 0.125rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #838383;
        cursor: pointer;
        margin-right: 0.2813rem;
        &.active {
          box-sizing: border-box;
          border-bottom: 0.0104rem solid #3f6ef2;
          color: #3f6ef2;
        }
      }
    }
    .null {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 150px;
      img {
        width: 326px;
        height: 212px;
      }
      h3 {
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #b3b3b3;
      }
    }
    // 搜索栏
    .user-search {
      display: flex;
      align-items: center;
      width: 100%;
      margin: 0.2604rem 0 0.1823rem 0;
      .f3_content_search_input {
        position: relative;
        display: flex;
        align-items: center;
        input {
          position: relative;
          box-sizing: border-box;
          height: 0.224rem;
          width: 1.6406rem;
          font-size: 0.0781rem;
          border: 0.0052rem solid #e0e0e0;
          padding: 0.0521rem 0.0521rem;
          color: #606266;
          outline: 0;
        }
        img {
          width: 0.0833rem;
          position: absolute;
          right: 0.0781rem;
          // top: 0.0781rem;
        }
      }
      div {
        margin-right: 0.1563rem;
        span {
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #737373;
          margin-right: 0.0521rem;
          font-size: 0.0833rem;
        }
        .el-select {
          width: 1.5625rem;
        }
      }
    }
    // 表格
    .table {
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      height: 100%;
      margin-top: 0.1042rem;
      cursor: pointer;
      overflow: auto;
      .span {
        display: inline-block;
        // width: 0.1563rem;
        // height: 0.125rem;
        font-size: 0.0781rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 0.026rem;
        color: #ccc;
        border-bottom: 0.0052rem solid #ccc;
        cursor: pointer;
        margin-right: 0.0521rem;
      }
      .span1 {
        display: inline-block;
        font-size: 0.0781rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 0.026rem;
        color: #3f6ef2;
        border-bottom: 0.0052rem solid #3f6ef2;
        cursor: pointer;
      }
      .nactive {
        font-size: 0.0729rem;
        margin-right: 0.026rem;
        color: #3f6ef2;
        border-bottom: 0.0052rem solid #3f6ef2;
      }
      .state-bar {
        span {
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #606266;
          margin-right: 0.0521rem;
        }
      }
    }

    // 分页器
    .pagination {
      display: flex;
      padding: 0.1042rem 0.1563rem 0.0521rem 0.0521rem;
      justify-content: right;
      position: absolute;
      bottom: 0.2083rem;
      right: 0.1042rem;
      span {
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #666666;
        margin-top: 0.0104rem;
      }
    }
  }
}
// 弹出框
.dialog-center {
  // width: 2.5781rem;
  height: 2.2396rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .dialog-center-top {
    width: 100%;
    height: 0.4167rem;
    background-color: #f4f4f4;
  }
  .dialog-center-bottom {
    width: 100%;
    height: 2.6042rem;
    .dialog-center-bottom-center {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      img {
        width: 1.5625rem;
        height: 1.5625rem;
      }
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 600;
          color: #1a1a1a;
          margin-bottom: 0.0417rem;
        }
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 0.625rem;
        height: 0.1667rem;
        background: #3f6ef2;
        border-radius: 0.0104rem;
        font-size: 0.0938rem;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  width: 2.5833rem !important;
}

/* 下拉选择器 */
::v-deep .el-input__inner {
  border-radius: 0px;
  padding: 0 0.0781rem;
  height: 0.2083rem;
  width: 1.5625rem;
}
::v-deep .el-select {
  width: 1.5625rem;
}
input::-webkit-input-placeholder {
  color: #aaa !important;
  font-size: 0.0781rem;
}
::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}
// 表格样式
::v-deep .el-table th.el-table__cell > .cell {
  font-size: 0.0938rem;
}
::v-deep .el-input__inner {
  &::placeholder {
    font-size: 0.0833rem;
    font-family: 'Microsoft YaHei';
  }
  color: #555;
  font-family: 'Microsoft YaHei';
  font-size: 0.0781rem !important;
}
/* 表格 */
::v-deep .el-table {
  th.el-table__cell > .cell {
    font-size: 0.0833rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0833rem;
  }
  .el-table__body-wrapper {
    overflow: auto;
    // height: calc(100% - 85px);
    &::-webkit-scrollbar {
      width: 0; /* 纵向滚动条 宽度 */
      height: 0.0781rem; /* 横向滚动条 高度 */
    }
    &::-webkit-scrollbar-thumb {
      width: 0.0521rem; /* 横向滚动条 宽度 */
      height: 0.0781rem; /* 纵向滚动条 高度 */
      background-color: rgb(167, 164, 164);
    }
  }
}
::v-deep .el-dialog__headerbtn {
  top: 0.1042rem;
  font-size: 0.0833rem;
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  width: 2.5833rem !important;
}
::v-deep .inviteAffirmClient .el-dialog__header {
  height: 0.1042rem;
}
</style>
<style lang="scss">
/* 分页器 */
.el-pagination.is-background .el-pager li {
  border-radius: 0.1042rem;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}
.el-pagination {
  font-size: 0.0833rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent;
}

.el-table tr {
  height: 0.2083rem;
}
.el-table .el-table thead {
  height: 0.2083rem;
}
.el-button--small {
  padding: 0;
}
.el-select-dropdown__item {
  font-size: 0.0833rem;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}
</style>
